import { storeToRefs } from "pinia";
import { Theme } from "./interface";
import { ElMessage } from "element-plus";
import { DEFAULT_PRIMARY } from "@/config";//初始的系统默认主题色是 DEFAULT_PRIMARY
import { useGlobalStore } from "@/stores/module/global";
import { getLightColor, getDarkColor } from "@/utils/color";
import { asideTheme, AsideThemeType } from "@/styles/theme/aside";  //侧边栏主题颜色

export const useTheme = () => {
  const globalStore = useGlobalStore();
  const { primary, isDark, isGrey, isWeak, asideInverted, layout } = storeToRefs(globalStore);

  const switchDark = () => {
    const body = document.documentElement as HTMLElement;//获取了文档的根元素，即 <html> 元素，并将其类型断言为 HTMLElement 类型
   //根据 isDark 的值来切换文档根元素的 class 属性。如果 isDark 的值为 true，则给文档根元素添加 dark 类，表示启用暗黑模式；否则，将其 class 属性设置为空字符串，表示禁用暗黑模式。
    if (isDark.value) body.setAttribute("class", "dark");
    else body.setAttribute("class", "");
    changePrimary(primary.value);
    setAsideTheme();
  };
////更改页面主题色
  const changePrimary = (val: string | null) => {
    debugger
    if (!val) {
      val = DEFAULT_PRIMARY;
      ElMessage({ type: "success", message: `主题颜色已重置为 ${DEFAULT_PRIMARY}` });
    }
    document.documentElement.style.setProperty("--el-color-primary", val);
    document.documentElement.style.setProperty(
      "--el-color-primary-dark-2",
      isDark.value ? `${getLightColor(val, 0.2)}` : `${getDarkColor(val, 0.3)}`
    );
    for (let i = 1; i <= 9; i++) {
      const primaryColor = isDark.value ? `${getDarkColor(val, i / 10)}` : `${getLightColor(val, i / 10)}`;
      document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor);
    }
    globalStore.setGlobalState("primary", val);
  };

  const changeGreyOrWeak = (type: Theme.GreyOrWeakType, value: boolean) => {
    const body = document.body as HTMLElement;
    if (!value) return body.removeAttribute("style");
    const styles: Record<Theme.GreyOrWeakType, string> = {
      grey: "filter: grayscale(1)",
      weak: "filter: invert(80%)"
    };
    body.setAttribute("style", styles[type]);
    const propName = type === "grey" ? "isWeak" : "isGrey";
    globalStore.setGlobalState(propName, false);
  };
//设置侧边栏主题
  const setAsideTheme = () => {
    debugger    
    let type: AsideThemeType = "senior";
    if (layout.value == "transverse") type = "inverted";
    if (layout.value == "vertical" && asideInverted.value) type = "inverted";
    if (isDark.value) type = "senior"; // 或者 type = "bright";

    console.log("类型"+type);
    
    const theme = asideTheme[type!];
    for (const [key, value] of Object.entries(theme)) {
      document.documentElement.style.setProperty(key, value);
    }
  };

  const initTheme = () => {
    switchDark();
    if (isGrey.value) changeGreyOrWeak("grey", true);
    if (isWeak.value) changeGreyOrWeak("weak", true);
  };

  // 默认暗黑模式
  if (isDark.value) {
    switchDark();
  }

  // 初始化主题
  initTheme();

  return {
    initTheme,
    switchDark,
    changePrimary,
    changeGreyOrWeak,
    setAsideTheme
  };
};